<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="isBack" :isHome="isHome">
			<block slot="content">店铺消费</block>
		</cu-custom>
		<scroll-view scroll-y="true" v-if="bigShow" :style="[{height: winHeight-CustomBar+'px'}]" @scroll="scroll"
		 :scroll-top="scrollTop" scroll-with-animation="true">
			<view class="good-info">
				<!-- banner -->
				<view class="tui-header-banner">
					<view class="tui-banner-bg">
						<view class="tui-banner-box">
							<swiper :indicator-dots="false" :autoplay="true" :interval="5000" :duration="150" @change="swiperChange" class="tui-banner-swiper"
							 :circular="true">
								<swiper-item v-for="(item,index) in goodsInfo.slider_image" :key="index">
									<image :src="item+'?x-oss-process=image/resize,m_fill,h_210,w_350'" class="tui-slide-image" />
								</swiper-item>
							</swiper>
							<view class="rollingBar">
								<view style="flex:1"></view>
								<block v-for="(item,index) in goodsInfo.slider_image" :key="index">
									<view class="tab-bar" :class="currentAdIndex==index?'active':''"></view>
								</block>
								<view style="flex:1"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- banner结束 -->
				<view class="product_info">
					<view class="">{{iscombo?goodsInfo.name:goodsInfo.product_name}}</view>
					<view></view>
					<view class="">
						<view class="">
							<text class="text-price text-colorP" v-if="goodsInfo.price>0">{{goodsInfo.price}}</text>
							<text class="text-colorP" v-if="goodsInfo.integral>0 && goodsInfo.price>0">+</text>
							<text class="text-colorP" v-if="goodsInfo.integral>0">{{goodsInfo.integral}}</text>
							<text class="text-colorP" v-if="goodsInfo.integral>0">积分</text>
						</view>
						<view class="">
							市场价：<text class="text-price">{{goodsInfo.ot_price}}</text>
						</view>
						<view class="" v-if="goodsInfo.sales>0">
							已售：{{goodsInfo.sales}}
						</view>
					</view>
					<view class="who-look">
						<view class="tt">TA们都在逛</view>
						<view class="t-cont">
							<view class="two">
								<view class="">
									<image :src="img" mode="" v-for="(img,k) in goodsInfo.u_data" :key="k"></image>
									<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/omit.png" mode=""></image>
								</view>
							</view>
							<view class="">
								邀请好友赚不停
								<text>邀好友赚{{goodsInfo.max_money}}</text>
								<!-- #ifdef H5 -->
								<button class="" @click="goShare"></button>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<button class="" open-type='share'></button>
								<!-- #endif -->
							</view>
						</view>
					</view>
				</view>
				<view class="summary">
					<text>“</text>
					<text class="text-cut">根据活动规则：促销商品购买成功后不支持退货、退款。</text>
					<text>”</text>
				</view>
			</view>
			<!-- 商户 -->
			<view class="shop-content" v-if="!iscombo">
				<view class="tit">
					<text>商户详情</text>
				</view>
				<view class="info" :data-id="goodsInfo.b_id" :data-industryId="goodsInfo.industry_id==6" @click="navUrl">
					<image class='f-img' :src="goodsInfo.shop_image+'?x-oss-process=image/resize,m_fill,h_80,w_80'" mode=""></image>
					<view class="c-view">
						<view class="text-cut">{{goodsInfo.b_name}}</view>
						<view class="">
							<text v-if="goodsInfo.consume_number>0">已售：{{goodsInfo.consume_number}}</text>
						</view>
						<view class="">
							<text v-for="(item,index) in goodsInfo.tags" :key="index">{{item}}</text>
						</view>
						<view class="">
							<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-address.png" mode=""></image>
							<text class="text-cut">{{goodsInfo.address}}</text>
						</view>
					</view>
					<view class="t-img" @tap.stop="makePhone">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-phone.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 套餐商品 -->
			<view class="combo-detail" v-if="iscombo">
				<view class="tit">
					<text>套餐详情</text>
				</view>
				<view class="combo-detail-info">
					<view class="combo-item" v-for="(item,index) in goodsInfo.product" :key="index">
						<view class="radius"></view>
						<view class="shops" :data-id="item.b_id" :data-industryId="item.b_industry==6" @click="navUrl">
							<text class="text-cut">{{item.b_name}}</text>
							<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/right1.png" mode=""></image>
						</view>
						<view class="items" v-for="(goods,g) in item.product" :key="g">
							<view class="">
								<text class="text-cut">{{goods.product_name}}</text>
								<text>({{goods.number}}份)</text>
							</view>
							<view class="text-price">
								{{goods.ot_price}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 商品详情 -->
			<view class="goods-parse">
				<view class="tit">
					<text>商品详情</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="shop-info-desc">
					<rich-text :nodes="goodsInfo.description"></rich-text>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="product-content shop-info-desc" v-html="goodsInfo.description"></view>
				<!-- #endif -->
			</view>
		</scroll-view>
		<view class="go-top" v-if="goTop" @click="goTopClick">
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Back-to-the-top.png" mode=""></image>
			<text>回顶部</text>
		</view>
		<view class="use-chain">
			<!-- <image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/share.png" mode=""></image> -->
			<view class="text-colorP" @click="darwCanvas">
				获取海报
			</view>
			<view class="">
				<view class="">
					<text class="text-price text-colorP" v-if="goodsInfo.price>0">{{goodsInfo.price}}</text>
					<text class="text-colorP" v-if="goodsInfo.integral>0 && goodsInfo.price>0">+</text>
					<text class="text-colorP" v-if="goodsInfo.integral>0">{{goodsInfo.integral}}</text>
					<text class="text-colorP" v-if="goodsInfo.integral>0">积分</text>
				</view>
			</view>
			<view class="" @click="submit">
				立即购买
			</view>
		</view>
		<view class="share-layer">邀请好友赚<text class="text-price">{{goodsInfo.max_money}}</text></view>
		<!-- 商品分享海报 -->
		<canvas canvas-id="goodsCanvas" v-if="canvasShow" style="width: 750px;height: 1076px"></canvas>
		<view class="goods-share-cont" v-if="isShare" @click="hideShare" @touchmove.stop.prevent="moveHandle">
			<image :src="shareImg" class="share-img"></image>
			<view class="save-btn-g" @tap.stop="saveImage" v-if="isShare">
				保存海报
			</view>
		</view>
		<!-- H5引导分享 -->
		<view class="h5-share" v-if="hShare" @click="hidehShare">
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/sharingTipsImg.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		promisify
	} from '@/utils/promise.util'
	import htmlParser from '@/utils/html-parser.js'
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				bigShow: false,
				currentAdIndex: 0,
				goodsInfo: {
					price: '',
					integral: '',
					product_name: '',
					max_money: 0
				},
				goodsId: '',
				shareScene: '',
				coordinate: {},
				winHeight: 0,
				goTop: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				isHome: false,
				isBack: false,
				requestScene: '',
				// 海报数据
				c_qr: '',
				c_bg: '',
				c_shop: '',
				canvasShow: false,
				shareImg: '',
				isShare: false,
				// 新加字段
				c_fx: '',
				c_kj: '',
				c_xin: '',
				c_shopImage: '',

				iscombo: false,
				hShare: false,
				isAmbassadorsMall: false
			}
		},
		onShareAppMessage(res) {
			var that = this
			if(that.isAmbassadorsMall){
				var titleText = '【'+uni.getStorageSync('userInfo').user_name+'的店】'+'自购更省钱，分享多赚钱~'
			}else{
				var titleText = '自购更省钱，分享多赚钱~'
			}
			var url = ''
			if (that.iscombo) {
				url = `/pages/shopsGoodShare?scene=${that.shareScene}&type=combo`
			} else {
				url = `/pages/shopsGoodShare?scene=${that.shareScene}`
			}
			if (res.from === 'button') { // 来自页面内分享按钮
			}
			return {
				title: titleText,
				path: url,
				imageUrl: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/distribution-of-posters.png?x-oss-process=image/resize,m_fill,h_280,w_350',
				success: (res) => {
					console.log("转发成功", res);
				},
				fail: (res) => {
					console.log("转发失败", res);
				}
			}
		},
		onLoad(options) {
			// #ifdef H5
			var href = window.location.href
			if (href.indexOf('code') > -1) {
				var zIndex = window.location.href.slice(window.location.href.indexOf('?'), window.location.href.indexOf('#'))
				window.location.href = window.location.href.split(zIndex).join('')
			}
			// #endif

			var scene = decodeURIComponent(options.scene)
			if (scene.indexOf('type=combo') > -1) {
				options.scene = scene.split('&')[0]
				options.type = 'combo'
			}
			if (scene.indexOf('ambassadorsMall=1') > -1) {
				options.ambassadorsMall = 1
			}
			// options.type = 'combo'
			// options.scene = '1'
			// 判断显示返回首页还是上一步
			var that = this
			var length = getCurrentPages().length
			if (length == 1) {
				this.isHome = true
			} else {
				this.isBack = true
			}
			// #ifdef H5
			if (!uni.getStorageSync('auth_token')) {
				let curUrl = `/${this.curUrlWithArgs()}?scene=${options.scene}`
				if (options.type) {
					curUrl += `&type=combo`
				}
				if (options.ambassadorsMall) {
					curUrl += `&ambassadorsMall=1`
				}
				curUrl = encodeURIComponent(curUrl)
				uni.redirectTo({
					url: `/pages/login?next=${curUrl}`,
				})
				return
			}
			// #endif
			// #ifdef !H5
			if (!uni.getStorageSync('auth_token')) {
				let curUrl = `/${this.curUrlWithArgs()}`
				curUrl = encodeURIComponent(curUrl)
				uni.redirectTo({
					url: `/pages/login?next=${curUrl}`,
				})
				return
			}
			// #endif

			// 存储支付时需要的数据
			this.requestScene = options.scene
			this.iscombo = (options.type && options.type == 'combo') ? true : false
			this.isAmbassadorsMall = (options.ambassadorsMall && options.ambassadorsMall == 1) ? true : false
			if (options.scene) {
				var that = this
				this.$request({
					url: '/User/getInfo',
					success: res => {
						if (res.data.status == 1) {
							if (options.scene.indexOf('-') > -1) {
								var sceneList = options.scene.split('-')
								that.goodsId = sceneList[0]
								// 套餐只是一级分销
								if (this.iscombo) {
									that.shareScene = sceneList[0] + '-' + res.data.data.m_id
								} else {
									// 整理生成二维码的数据
									var users = []
									if (sceneList.length == 3) {
										users = sceneList.splice(2, sceneList.length - 1)
									} else {
										users = sceneList.splice(1, sceneList.length - 1)
									}
									users.push(res.data.data.m_id)
									users.unshift(that.goodsId)
									that.shareScene = users.join('-')
								}
							} else {
								that.shareScene = options.scene + '-' + res.data.data.m_id
								that.goodsId = options.scene
							}
							uni.hideLoading()
							if (options.type && options.type == 'combo') {
								that.comboDetail()
							} else {
								that.getInfo()
							}
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {}
				});


			}

			uni.getSystemInfo({
				success: (res) => {
					this.winHeight = res.windowHeight
				}
			})
		},
		methods: {
			goShare() {
				this.hShare = true
			},
			hidehShare() {
				this.hShare = false
			},
			navUrl(e) {
				var isIndusty = e.currentTarget.dataset.industryid
				var id = e.currentTarget.dataset.id
				if (isIndusty) {
					uni.navigateTo({
						url: '/pages/scenicDetail?busId=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages/generalDetail?busId=' + id
					})
				}
			},
			moveHandle() {},
			saveImage: function(e) {
				var that = this;
				uni.showLoading({
					title: '保存中',
				})
				uni.saveImageToPhotosAlbum({
					filePath: that.shareImg,
					success: function(res) {
						uni.hideLoading()
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 3000
						})
					},
					fail: function(res) {
						uni.showToast({
							title: '保存失败',
							icon: 'error',
							duration: 300
						})
					}
				})
			},
			hideShare() {
				this.isShare = false
			},
			darwCanvas() {
				var that = this;
				// #ifdef H5
				that.goShare()
				return
				// #endif

				if (that.shareImg) {
					that.isShare = true
					return
				}
				var goodsInfo = this.goodsInfo
				that.canvasShow = true
				uni.showLoading({
					title: '资源整合中',
				})
				// 生成海报
				const uNiDownloadFile = promisify(uni.getImageInfo)
				Promise.all([
					uNiDownloadFile({
						src: goodsInfo.product_code + '?x-oss-process=image/resize,m_fill,h_280,w_280'
					}),
					uNiDownloadFile({
						src: goodsInfo.xcx_image
					}),
					uNiDownloadFile({
						src: goodsInfo.image + '?x-oss-process=image/resize,m_fill,h_690,w_690'
					}),
					uNiDownloadFile({
						src: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/angle2.png' +
							'?x-oss-process=image/resize,m_fill,h_26,w_81'
					}),
					uNiDownloadFile({
						src: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/square1.png' +
							'?x-oss-process=image/resize,m_fill,h_36,w_650'
					}),
					uNiDownloadFile({
						src: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/heart1.png' +
							'?x-oss-process=image/resize,m_fill,h_24,w_24'
					}),
					uNiDownloadFile({
						src: goodsInfo.shop_image + '?x-oss-process=image/resize,m_fill,h_64,w_64'
					})
				]).then(res => {
					that.c_qr = res[0].path
					that.c_bg = res[1].path
					that.c_shop = res[2].path
					that.c_fx = res[3].path
					that.c_kj = res[4].path
					that.c_xin = res[5].path
					that.c_shopImage = res[6].path
					that.draw()
				}).catch(function(err) {
					uni.hideLoading()
					uni.showToast({
						title: '生成海报失败',
						icon: 'none'
					});
				})
			},
			//绘制
			draw() {
				uni.showLoading({
					title: '生成海报中',
				})
				var that = this;
				const ctx = uni.createCanvasContext('goodsCanvas', that);
				var goodsInfo = this.goodsInfo
				// 渲染背景
				const grd = ctx.createLinearGradient(0, 0, 750, 1076);
				grd.addColorStop(0, '#ffffff');
				grd.addColorStop(1, '#ffffff');
				ctx.setFillStyle(grd); //将渐变色渲染入正方形
				ctx.fillRect(0, 0, 750, 1076); //起点坐标为（20，20），长宽都为120px的正方形
				var name = uni.getStorageSync('userInfo').user_name
				var userName = name.length > 5 ? name.slice(0, 5) : name
				var topShowTitle = '推荐一个好物给你,请查收'
				ctx.font = "normal normal 24px 微软雅黑 ";
				var topTileWidth = parseInt(ctx.measureText(userName).width) + 122 + parseInt(ctx.measureText(topShowTitle).width)
				// 参数分别为canvas对象  left top 宽度 高度  北京颜色  圆角尺寸
				that.drawRadiusRect(ctx, (750 - topTileWidth) / 2, 40, topTileWidth, 56, '#f5f5f5', 28)
				// 矩形框绘制完成
				// 绘制原型用户图像
				ctx.save(); // 先保存状态 已便于画完圆再用
				ctx.beginPath(); //开始绘制
				//先画个圆
				ctx.arc((750 - topTileWidth) / 2 + 43, 68, 18, 0, Math.PI * 2, false);
				ctx.setFillStyle('#ffffff')
				ctx.fill() //保证图片无bug填充
				ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
				ctx.drawImage(that.c_bg, (750 - topTileWidth) / 2 + 25, 50, 36, 36) // 推进去图片
				ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
				ctx.setFillStyle('#0099ff');
				ctx.fillText(userName, (750 - topTileWidth) / 2 + 71, 76);
				ctx.setFillStyle('#4f4b40');
				ctx.fillText(topShowTitle, (750 - topTileWidth) / 2 + 87 + userName.length * 24, 76);
				ctx.restore();
				// 顶部绘制完成
				ctx.beginPath();
				ctx.save();
				let width = 670
				let radius = 16
				let angleLine = 10
				ctx.setLineWidth(1)
				ctx.setStrokeStyle('#E9E9E9')
				ctx.moveTo(30 + angleLine, 116); // 创建开始点
				ctx.lineTo(30 + angleLine + width, 116); // 创建水平线
				ctx.arcTo(30 + angleLine * 2 + width, 116, 30 + angleLine * 2 + width, 116 + angleLine, radius); // 创建弧
				ctx.lineTo(30 + angleLine + width + angleLine, 116 + angleLine + width); // 创建垂直线
				ctx.arcTo(30 + angleLine * 2 + width, 116 + angleLine * 2 + width, 30 + angleLine + width, 116 + angleLine * 2 +
					width, radius); // 创建弧
				ctx.lineTo(30 + angleLine, 116 + angleLine * 2 + width); // 创建水平线
				ctx.arcTo(30, 116 + angleLine * 2 + width, 30, 116 + angleLine + width, radius); // 创建弧
				ctx.lineTo(30, 116 + angleLine); // 创建垂直线
				ctx.arcTo(30, 116, 30 + angleLine, 116, radius); // 创建弧
				ctx.stroke(); // 这个具体干什么用的？
				ctx.clip();
				ctx.drawImage(that.c_shop, 30, 116, 690, 690)
				ctx.restore();
				// 白色透明度背景
				ctx.beginPath();
				ctx.save();
				ctx.setLineWidth(1)
				ctx.setStrokeStyle('rgba(255,255,255,0.8)')
				ctx.moveTo(40, 568); // 创建开始点
				ctx.lineTo(710, 568); // 创建水平线
				ctx.arcTo(720, 568, 720, 578, 20); // 创建弧
				ctx.lineTo(720, 796); // 创建垂直线
				ctx.arcTo(720, 806, 710, 806, 20); // 创建弧
				ctx.lineTo(40, 806); // 创建水平线
				ctx.arcTo(30, 806, 30, 796, 20); // 创建弧
				ctx.lineTo(30, 578); // 创建垂直线
				ctx.arcTo(30, 568, 40, 568, 20); // 创建弧
				ctx.closePath()
				ctx.clip();
				ctx.fillStyle = "rgba(255,255,255,0.8)";
				ctx.fillRect(30, 568, 690, 238);
				ctx.stroke();
				ctx.restore();
				// 背景结束
				ctx.drawImage(that.c_fx, 50, 599, 81, 26)
				var money = '¥' + goodsInfo.price
				var otPrice = '市场价：' + goodsInfo.ot_price
				ctx.font = "normal normal 32px 微软雅黑 bold";
				ctx.setFillStyle('#f34930');
				ctx.fillText(money, 142, 623);
				ctx.font = "normal normal 24px 微软雅黑 ";
				ctx.setFillStyle('#999999');
				ctx.fillText(otPrice, 170 + money.length * 16, 620);
				ctx.beginPath();
				ctx.save();
				ctx.setLineWidth(1)
				ctx.setStrokeStyle('#999999')
				ctx.moveTo(170 + money.length * 16, 612); // 创建开始点
				ctx.lineTo(170 + money.length * 16 + ctx.measureText(otPrice).width, 612); // 创建水平线
				ctx.closePath()
				ctx.stroke();
				ctx.restore();
				// 商铺信息
				ctx.save(); // 先保存状态 已便于画完圆再用
				ctx.beginPath(); //开始绘制
				ctx.arc(82, 697, 32, 0, Math.PI * 2, false);
				ctx.setFillStyle('#ffffff')
				ctx.fill() //保证图片无bug填充
				ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
				ctx.drawImage(that.c_shopImage, 50, 665, 64, 64) // 推进去图片
				ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
				if (that.iscombo) {
					var shopName = '环球掌商'
				} else {
					if(that.isAmbassadorsMall){
						var shopName = '环球掌商 · 推广大使' + name +'的店'
					}else{
						var shopName = '环球掌商 · ' + goodsInfo.b_name
					}
				}
				var shopDesc = '分享好物，好友购买下单即领奖励'
				ctx.font = "normal normal 28px 微软雅黑 bold";
				ctx.setFillStyle('#333333');
				ctx.fillText(shopName, 135, 690);
				ctx.font = "normal normal 24px 微软雅黑";
				ctx.setFillStyle('#f8990b');
				ctx.fillText(shopDesc, 135, 725);
				ctx.drawImage(that.c_kj, 50, 750, 650, 36) // 推进去图片
				ctx.font = "normal normal 24px 微软雅黑 bold";
				ctx.setFillStyle('#333333');
				ctx.fillText('邀请好友购买成功后每单可得', 60, 775);
				ctx.font = "normal normal 24px 微软雅黑";
				ctx.setFillStyle('#fff');
				ctx.fillText(goodsInfo.max_money + '元秒到个人账户', 465, 775);
				ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
				// 商户名称
				if (that.iscombo) {
					var textText = '环球掌商'
				} else {
					if(that.isAmbassadorsMall){
						var textText = '推广大使' + name +'的店'
					}else{
						var textText = goodsInfo.b_name;
					}
				}
				ctx.font = "normal normal 30px 微软雅黑 ";
				ctx.setFillStyle('#4f4b40');
				let arrText = textText.split('');
				let line = '';
				let arrTr = [];
				for (let i = 0; i < arrText.length; i++) {
					var testLine = line + arrText[i];
					var metrics = ctx.measureText(testLine);
					var textWidth = metrics.width;
					if (textWidth > 473 && i > 0) {
						arrTr.push(line);
						line = arrText[i];
					} else {
						line = testLine;
					}
					if (i == arrText.length - 1) {
						arrTr.push(line);
					}
				}
				if (arrTr.length > 2) {
					arrTr[1] = arrTr[1] + '...'
					arrTr = arrTr.splice(0, 2)
				}
				for (let i = 0; i < arrTr.length; i++) {
					ctx.fillText(arrTr[i], 30, 860 + i * 35);
				}
				ctx.drawImage(that.c_xin, 30, 995, 24, 24) // 推进去图片
				if (goodsInfo.browse > 0) {
					ctx.font = "normal normal 24px 微软雅黑";
					ctx.setFillStyle('#f34930');
					ctx.fillText(goodsInfo.browse + '人喜欢', 67, 1014);
				}
				ctx.drawImage(that.c_qr, 550, 836, 140, 140) // 推进去图片
				ctx.font = "normal normal 24px 微软雅黑";
				ctx.setFillStyle('#666666');
				ctx.fillText('长按或扫描购买', 534, 1014);
				ctx.draw(true, () => {
					setTimeout(function() {
						uni.canvasToTempFilePath({
							canvasId: 'goodsCanvas',
							success: function(res) {
								that.shareImg = res.tempFilePath
								that.canvasShow = false
								that.isShare = true
								uni.hideLoading()
							},
							fail(e) {
								uni.hideLoading()
								uni.showToast({
									title: '生成海报失败',
									icon: 'none'
								});
							}
						}, that)
					}, 100)
				})
			},
			// 绘制圆角矩形
			drawRadiusRect(ctx, left, top, width, height, color, mr) {
				//绘制背景色
				let x = left,
					y = top,
					w = width,
					h = height,
					r = mr
				ctx.beginPath()
				ctx.save()
				// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
				ctx.setFillStyle('transparent')
				// ctx.setStrokeStyle('transparent')
				// 左上角
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

				// border-top
				ctx.moveTo(x + r, y)
				ctx.lineTo(x + w - r, y)
				ctx.lineTo(x + w, y + r)
				// 右上角
				ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

				// border-right
				ctx.lineTo(x + w, y + h - r)
				ctx.lineTo(x + w - r, y + h)
				// 右下角
				ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

				// border-bottom
				ctx.lineTo(x + r, y + h)
				ctx.lineTo(x, y + h - r)
				// 左下角
				ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

				// border-left
				ctx.lineTo(x, y + r)
				ctx.lineTo(x + r, y)

				// 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
				ctx.fill()
				// ctx.stroke()
				ctx.closePath()
				// 剪切
				ctx.clip()
				ctx.setFillStyle(color)
				ctx.fillRect(x, y, width, height)
				ctx.restore();
			},
			submit() {
				var that = this
				var goodsInfo = this.goodsInfo
				// 制作request需要的数据
				var requestSceneStr = that.requestScene.split('-').filter(item => item != that.goodsInfo.id).join('-')
				var neddPolishScord = 0
				var zoomPrice = 0
				// 积分需要补齐的
				if (this.goodsInfo.integral > 0 && this.goodsInfo.integral > this.goodsInfo.jifen) {
					neddPolishScord = this.goodsInfo.integral - this.goodsInfo.jifen
				}
				// 是否需要补齐积分  补了多少钱
				var extraMoney = 0
				if (neddPolishScord > 0) {
					extraMoney = neddPolishScord
					zoomPrice = Number(goodsInfo.price) + goodsInfo.integral
				} else {
					zoomPrice = Number(goodsInfo.price)
				}
				var requestPro = []
				requestPro.push({
					saleNum: 1,
					id: goodsInfo.id,
					price: goodsInfo.price,
					integral: goodsInfo.integral,
					product_name: goodsInfo.product_name,
					image: goodsInfo.image
				})
				// 替换saleNums字段为number字段
				if (!this.iscombo) {
					var zoomNums = 1
					this.$request({
						url: '/OnlineOrder/order_pay',
						method: 'POST',
						data: {
							total_num: zoomNums,
							business_id: that.goodsInfo.b_id,
							pay_price: zoomPrice,
							// pay_price: '0.01',
							product_info: JSON.stringify(requestPro),
							// 非必填
							use_integral: extraMoney == 0 ? that.goodsInfo.integral : that.goodsInfo.jifen,
							extraMoney: extraMoney,
							distribution_user: requestSceneStr
						},
						success: res => {
							if (res.data.status == 1) {
								var param = res.data.data
								that.wxPay(param)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.$request({
						url: '/ComboOrder/order_pay',
						method: 'POST',
						data: {
							pay_price: zoomPrice,
							// pay_price: '0.01',
							product_id: that.goodsId,
							// 非必填
							product_info: JSON.stringify(requestPro),
							use_integral: extraMoney == 0 ? that.goodsInfo.integral : that.goodsInfo.jifen,
							extraMoney: extraMoney,
							distribution_user: requestSceneStr
						},
						success: res => {
							if (res.data.status == 1) {
								var param = res.data.data
								that.wxPay(param)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}

			},

			// 支付
			wxPay(param) {
				var that = this
				// #ifdef H5
				that.$wx.checkJsApi({
					jsApiList: [
						'chooseWXPay'
					],
					success: function(res) {
						that.$wx.chooseWXPay({
							appId: param.appId,
							timestamp: param.timeStamp,
							nonceStr: param.nonceStr,
							package: param.package,
							signType: param.signType,
							paySign: param.paySign,
							success: function(log) {
								if (log.errMsg == 'chooseWXPay:ok') {
									if (that.iscombo) {
										uni.showModal({
											title: '支付成功',
											content: '套餐使用券已经存放入你的个人中心->钱包->已购套餐中',
											confirmText: '去核销',
											cancelText: '回首页',
											success(res) {
												if (res.confirm) {
													uni.redirectTo({
														url: `/pages/myCombo`
													})
												} else {
													uni.switchTab({
														url: '/pages/tabBar/home'
													})
												}
											}
										})
									} else {
										uni.showToast({
											title: '支付成功'
										})
										setTimeout(function() {
											uni.redirectTo({
												url: `/pages/orderDetail?id=${param.order_id}&status=needSave`
											})
										}, 1000)
									}
								}
							},
							fail(err) {
								uni.showToast({
									title: '支付失败'
								})
							}
						})
						if (res.checkResult.chooseWXPay == false) {
							alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！')
						}
					}
				})
				// #endif

				// #ifdef MP-WEIXIN
				// fromType==offline  线下商品  其他为商城
				wx.requestPayment({
					'timeStamp': param.timeStamp,
					'nonceStr': param.nonceStr,
					'package': param.package,
					'signType': param.signType,
					'paySign': param.paySign,
					success: function success(res) {
						if (that.iscombo) {
							uni.showModal({
								title: '支付成功',
								content: '套餐使用券已经存放入你的个人中心->钱包->已购套餐中',
								confirmText: '去核销',
								cancelText: '回首页',
								success(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: `/pages/myCombo`
										})
									} else {
										uni.switchTab({
											url: '/pages/tabBar/home'
										})
									}
								}
							})
						} else {
							uni.showToast({
								title: '支付成功'
							})
							setTimeout(function() {
								uni.redirectTo({
									url: `/pages/orderDetail?id=${param.order_id}`
								})
							}, 1000)
						}
					},
					fail: function success(err) {
						uni.showToast({
							title: '支付失败'
						})
					}
				});
				// #endif

				// #ifdef !H5 && !MP-WEIXIN
				uni.showToast({
					title: '敬请期待~',
					icon: 'none'
				})
				// #endif
				uni.hideLoading()
			},

			goTopClick() {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			scroll(e) {
				if (e.detail.scrollTop > 100) {
					this.goTop = true
				} else {
					this.goTop = false
				}
				this.old.scrollTop = e.detail.scrollTop
			},
			// 拨打电话
			makePhone() {
				if (this.goodsInfo.special_plane) {
					uni.makePhoneCall({
						phoneNumber: this.goodsInfo.special_plane
					});
				} else {
					uni.showToast({
						title: '尚未开启'
					})
				}
			},
			// 更换轮播图样式
			swiperChange(e) {
				this.currentAdIndex = e.detail.current
			},
			curUrlWithArgs() {
				var pages = getCurrentPages()
				var currentPage = pages[pages.length - 1]
				var url = currentPage.route
				var options = currentPage.options
				var urlWithArgs = url + '?'
				for (var key in options) {
					var value = options[key]
					urlWithArgs += key + '=' + value + '&'
				}
				urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
				return urlWithArgs
			},
			comboDetail() {
				var that = this;
				this.$request({
					url: '/Combo/get_combo_detail',
					data: {
						id: that.goodsId,
						param: that.shareScene + '&type=combo'
					},
					success: res => {
						if (res.data.status == 1) {
							res.data.data.u_data = JSON.parse(res.data.data.u_data)
							if (!res.data.data.slider_image) {
								res.data.data['slider_image'] = []
								res.data.data['slider_image'].push(res.data.data.image)
							}
							var jsonText = res.data.data.desc
							var htmlString = jsonText.replace(/\\/g, "").replace(/<img/g,
								"<img style=\"margin: 0 auto;display: block;width:100%;height:auto;\"");
							// #ifdef MP-WEIXIN
							res.data.data['description'] = htmlParser(htmlString);
							// #endif
							// #ifdef H5
							res.data.data['description'] = htmlString;
							// #endif
							// 添加banner
							if (res.data.data.industry_id == 6) {
								res.data.data.slider_image.unshift(
									'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/distribution-of-the-scenic-spot1.png')
							} else {
								res.data.data.slider_image.unshift(
									'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/non-scenic-distribution1.png')
							}
							that.goodsInfo = res.data.data
							that.bigShow = true

							// #ifdef H5
							that.wxConfig()
							// #endif
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getInfo() {
				var that = this;
				this.$request({
					url: '/Product/get_product_detail',
					data: {
						id: that.goodsId,
						param: that.shareScene
					},
					success: res => {
						if (res.data.status == 1) {
							res.data.data.u_data = JSON.parse(res.data.data.u_data)
							if (res.data.data.slider_image) {
								res.data.data.slider_image = JSON.parse(res.data.data.slider_image)
							}
							var jsonText = res.data.data.description
							var htmlString = jsonText.replace(/\\/g, "").replace(/<img/g,
								"<img style=\"margin: 0 auto;display: block;width:100%;height:auto;\"");
							// #ifdef MP-WEIXIN
							res.data.data['description'] = htmlParser(htmlString);
							// #endif

							// #ifdef H5
							res.data.data['description'] = htmlString;
							// #endif

							// 添加banner
							if (res.data.data.industry_id == 6) {
								res.data.data.slider_image.unshift(
									'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/distribution-of-the-scenic-spot1.png')
							} else {
								res.data.data.slider_image.unshift(
									'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/non-scenic-distribution1.png')
							}

							that.goodsInfo = res.data.data
							that.bigShow = true
							// #ifdef H5
							that.wxConfig()
							// #endif
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			/**配置jsApi**/
			wxConfig() {
				var that = this
				let system = uni.getSystemInfoSync(); // 获取系统信息
				var url = ''
				if (system.platform === 'android') { // 判断平台
					url = window.location.href
				} else {
					if (window.location.href.indexOf('#')) {
						url = window.location.href.split('#')[0]
					} else {
						url = window.location.href.split('//')[0]
					}
				}
				this.$request({
					url: '/JsTicket/getSignPackage',
					data: {
						'url': url,
					},
					success: res => {
						var result = res.data.data
						that.$wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端console.log出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: result.appId, // 必填，公众号的唯一标识
							timestamp: result.timestamp, // 必填，生成签名的时间戳
							nonceStr: result.nonceStr, // 必填，生成签名的随机串
							signature: result.signature, // 必填，签名
							jsApiList: [
								"onMenuShareTimeline",
								"onMenuShareAppMessage",
								"onMenuShareQQ",
								"onMenuShareWeibo",
								"onMenuShareQZone",
								'checkJsApi',
								'chooseWXPay'
							] // 必填，需要使用的JS接口列表
						});
						if(that.isAmbassadorsMall){
							var title = '【'+uni.getStorageSync('userInfo').user_name+'】'+'自购更省钱，分享多赚钱~'
						}else{
							var title = '自购更省钱，分享多赚钱~'
						}
						
						if (that.iscombo) {
							var thisUrl = window.location.href.split('#')[0] + 'static/html/redirect.html?app3Redirect=' +
								encodeURIComponent(window.location.href.split('#')[0] + '#/pages/shopsGoodShare?scene=' + that.shareScene +
									'&type=combo');
							var desc = '包含商户已启动分销赚佣金的返现活动，转发并购买，佣金可瞬间到账~'
						} else {
							var thisUrl = window.location.href.split('#')[0] + 'static/html/redirect.html?app3Redirect=' +
								encodeURIComponent(window.location.href.split('#')[0] + '#/pages/shopsGoodShare?scene=' + that.shareScene);
							var desc = that.goodsInfo.b_name + '已启动分销赚佣金的返现活动，转发并购买，佣金可瞬间到账~'
						}

						var imgurl = 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/distribution-of-posters.png'
						that.$wx.ready(function() {
							//获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
							that.$wx.onMenuShareQQ({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});

							//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
							that.$wx.onMenuShareAppMessage({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								type: 'link', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});

							//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
							that.$wx.onMenuShareTimeline({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});

							//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
							that.$wx.onMenuShareWeibo({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});

							//获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
							that.$wx.onMenuShareQZone({
								title: title, // 分享标题
								desc: desc, // 分享描述
								link: thisUrl, // 分享链接
								imgUrl: imgurl, // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});
						})
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},

		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
	}
</script>

<style scoped>
	.good-info {
		width: 100%;
		padding: 20rpx 24rpx;
		background: #fff;
	}

	/* 新banner */
	.tui-header-banner {
		width: 100%;
		/* #ifdef H5 */
		/* padding-top: 20upx !important; */
		/* #endif */
	}

	.tui-banner-bg {
		width: 100%;
		display: flex;
		height: 420rpx;
		position: relative;
		border-radius: 0 0 70rpx 70rpx;
	}

	.tui-banner-box {
		width: 100%;
		box-sizing: border-box;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 420rpx;
		overflow: hidden;
		transform: translateY(0);
	}

	.tui-banner-swiper swiper-item {
		padding: 0 0 20rpx;
		box-sizing: border-box;
		border-radius: 12upx;
	}

	.tui-slide-image {
		width: 100%;
		height: 420rpx;
		display: block;
		border-radius: 12upx;
		box-shadow: 3rpx 3px 10rpx rgba(0, 0, 0, .3);
	}

	.rollingBar {
		width: 100%;
		position: absolute;
		bottom: 20rpx;
		left: 0;
		display: flex;
		align-items: center;
	}

	.rollingBar .tab-bar {
		width: 10rpx;
		height: 10rpx;
		background-color: #fff;
		opacity: 0.7;
		border-radius: 100%;
		margin-right: 20rpx;
		transition: all 0.2s;
	}

	.rollingBar .tab-bar:last-child {
		margin-right: 0;
	}

	.rollingBar .tab-bar:last-child {
		margin-right: 0;
	}

	.rollingBar .tab-bar.active {
		width: 40rpx;
		opacity: 1;
		border-radius: 50rpx;
	}

	.product_info {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background: #fff;
		position: relative;
		border-radius: 0 0 8rpx 8rpx;
		padding: 20rpx 0;
	}

	.product_info>view:nth-child(1) {
		color: #333333;
		font-size: 32rpx;
		width: 700rpx;
		font-weight: bold;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.product_info>view:nth-child(2) {
		font-size: 26rpx;
		letter-spacing: 1rpx;
		color: #666666;
		margin-top: 20rpx;
	}

	.product_info>view:nth-child(3) {
		display: flex;
		align-items: center;

	}

	.product_info>view:nth-child(3)>view:nth-child(1) {
		font-size: 30rpx;
		font-weight: bold;
	}

	.product_info>view:nth-child(3)>view:nth-child(2) {
		font-size: 24rpx;
		color: #999999;
		flex: 1;
		margin-left: 15rpx;
	}

	.product_info>view:nth-child(3)>view:nth-child(3) {
		font-size: 28rpx;
		color: #f8990b;
	}

	.who-look {
		width: 100%;
		height: 156rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		border: solid 1rpx #efefef;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		margin-top: 30rpx
	}

	.who-look .tt {
		font-size: 30rpx;
		color: #666666;
	}

	.t-cont {
		display: flex;
		justify-content: space-between;
		height: 48rpx;
	}

	.t-cont .two {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.t-cont .two>view:nth-child(1) image {
		width: 48rpx;
		height: 48rpx;
		border-radius: 100%;
		margin-right: -5rpx;
	}

	.t-cont>view:nth-child(2) {
		width: 230rpx;
		height: 48rpx;
		background-color: #f8c30b;
		border-radius: 24rpx;
		position: relative;
		font-size: 24rpx;
		text-align: center;
		line-height: 48rpx;
		color: #fff;
	}


	.t-cont>view:nth-child(2)>text {
		display: block;
		background-image: linear-gradient(-30deg,
			#f34930 0%,
			#f8990b 100%),
			linear-gradient(#012792,
			#012792);
		background-blend-mode: normal,
			normal;
		border-radius: 10rpx;
		line-height: 40rpx;
		position: absolute;
		top: -55rpx;
		left: 50%;
		/* width: 145rpx; */
		margin-left: -75rpx;
		text-align: center;
		font-size: 20rpx;
		color: #fff;
		-webkit-animation-name: scaleDraw;
		/*关键帧名称*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		-webkit-animation-iteration-count: infinite;
		/*动画播放的次数*/
		-webkit-animation-duration: 5s;
		/*动画所花费的时间*/
		padding: 0 15rpx;

	}

	.t-cont>view:nth-child(2)>text:after {

		content: "";
		position: absolute;
		bottom: 12rpx;
		left: 50%;
		border: 15rpx solid transparent;
		border-top-color: #f34930;
		border-bottom: 0;
		margin: 0 0 -17rpx -7rpx;
		border-left: 0;
		transform: rotate(-135deg);
		/* background-image: linear-gradient(-30deg,
			#f34930 0%,
			#f8990b 100%),
			linear-gradient(#012792,
			#012792); */
	}


	@keyframes scaleDraw {

		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		25% {
			transform: scale(1.1);
			/*放大1.1倍*/
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.1);
		}
	}


	.goods-parse {
		width: 100%;
		background: #fff;
		margin-top: 20rpx;
		padding-bottom: 120rpx;
	}

	.tit {
		box-sizing: border-box;
		height: 90rpx;
		padding: 0 24rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tit text {
		font-size: 30rpx;
		line-height: 36rpx;
		letter-spacing: 1rpx;
		color: #333333;
		font-weight: bold;
	}

	.shop-content {
		width: 100%;
		background: #fff;
		padding: 0 0 30rpx;
		margin-top: 20rpx;
	}

	.info {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 24rpx;
	}

	.info .f-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.info .c-view {
		flex: 1;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 20rpx;
	}

	.info .c-view>view:nth-child(1) {
		max-width: 380rpx;
		font-size: 30rpx;
		line-height: 36rpx;
		color: #333333;
		letter-spacing: 1rpx;
	}

	.info .c-view>view:nth-child(2),
	.info .c-view>view:nth-child(3),
	.info .c-view>view:nth-child(4) {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.info .c-view>view:nth-child(2)>text {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #666666;
	}

	.info .c-view>view:nth-child(2)>text:nth-child(2) {
		margin: 0 10rpx;
		width: 1rpx;
		height: 20rpx;
		display: inline-block;
		background: #efefef;
	}

	.c-view>view:nth-child(3)>text {
		display: inline-block;
		padding: 0 5rpx;
		border: solid 1rpx #f8990b;
		border-radius: 4rpx;
		font-size: 20rpx;
		color: #f8990b;
		line-height: 28rpx;
		margin-right: 10rpx;
	}

	.c-view>view:nth-child(4) image {
		width: 23rpx;
		height: 23rpx;
		margin-right: 10rpx;
	}

	.c-view>view:nth-child(4) text {
		font-size: 24rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 350rpx;
	}

	.info .t-img {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-left: solid 1rpx #efefef;
	}

	.info .t-img image {
		width: 56rpx;
		height: 56rpx;
	}

	.go-top {
		width: 120rpx;
		height: 120rpx;
		background-color: rgba(0, 0, 0, .5);
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 100%;
		position: fixed;
		bottom: 260rpx;
		right: 24rpx;
		justify-content: center;
	}

	.go-top image {
		width: 44rpx;
		height: 44rpx;
	}

	.go-top text {
		font-size: 24rpx;
		line-height: 45rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
	}

	.share-layer {
		position: fixed;
		bottom: 120rpx;
		left: 24rpx;
		background-image: linear-gradient(-30deg,
			#f34930 0%,
			#f8990b 100%),
			linear-gradient(#012792,
			#012792);
		background-blend-mode: normal,
			normal;
		border-radius: 10rpx;
		line-height: 40rpx;
		/* width: 145rpx; */
		padding: 0 15rpx;
		text-align: center;
		font-size: 20rpx;
		color: #fff;
		-webkit-animation-name: scaleDraw;
		/*关键帧名称*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		-webkit-animation-iteration-count: infinite;
		/*动画播放的次数*/
		-webkit-animation-duration: 5s;
		/*动画所花费的时间*/
	}

	.share-layer:after {
		content: "";
		position: absolute;
		bottom: 12rpx;
		left: 20rpx;
		border: 15rpx solid transparent;
		border-top-color: #f8990b;
		border-bottom: 0;
		margin: 0 0 -17rpx 0;
		border-left: 0;
		transform: rotate(-135deg);
	}

	.use-chain {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		z-index: 99;
		border-top: solid 1rpx #efefef
	}

	.use-chain image {
		width: 44rpx;
		height: 44rpx;
		margin: 0 28rpx
	}

	.use-chain>view:nth-child(1) {
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bold;
		background: #f34930;
		color: #fff;
		border-radius: 35rpx;
		margin: 0 10rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.use-chain>view:nth-child(2) {
		flex: 1;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 10rpx 0 10rpx 30rpx;
		border-left: solid 1rpx #efefef;
	}

	.use-chain>view:nth-child(2)>view:nth-child(1)>text {
		font-weight: bold;
		font-size: 30rpx;
	}

	.use-chain>view:nth-child(2)>view:nth-child(2) {
		width: 250rpx;
		height: 30rpx;
		line-height: 30rpx;
		padding: 0 10rpx;
		background: rgba(243, 73, 48, .2);
		color: #f34930;
		font-size: 20rpx;
		border-radius: 4rpx;
		text-align: center;
	}

	.use-chain>view:nth-child(3) {
		width: 250rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		background: #f34930;
		font-size: 30rpx;
	}

	.goods-share-cont {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		z-index: 1027;
	}

	.share-img {
		display: block;
		overflow: hidden;
		width: 700rpx;
		height: 1040rpx;
		border-radius: 8rpx;
	}

	.save-btn-g {
		width: 300rpx;
		height: 80rpx;
		border-radius: 8rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 30rpx;
		border-radius: 8rpx;
		text-align: center;
		background: #f34930;
		margin-top: 80rpx
	}

	.combo-detail {
		width: 100%;
		background: #fff;
		margin-top: 20rpx;
	}

	.combo-detail-info {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.combo-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		padding-left: 28rpx;
		box-sizing: border-box;
	}

	.combo-item .radius {
		width: 8px;
		height: 8px;
		background-color: #333333;
		position: absolute;
		top: 10rpx;
		left: 0;
		border-radius: 100%;
	}

	.combo-item .shops {
		display: flex;
		align-items: center;
		height: 36rpx;
		margin-bottom: 20rpx;
	}

	.combo-item .shops text {
		max-width: 500rpx;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-right: 20rpx;
	}

	.combo-item .shops image {
		width: 30rpx;
		height: 30rpx;
	}

	.combo-item .items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.combo-item .items>view:nth-child(1) {
		display: flex;
		align-items: center;
	}

	.combo-item .items>view:nth-child(1)>text:nth-child(1) {
		max-width: 400rpx;
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-right: 20rpx;
	}

	.combo-item .items>view:nth-child(1)>text:nth-child(2) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #999999;
	}

	.combo-item .items>view:nth-child(2) {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}

	.h5-share {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		z-index: 1027;
	}

	.h5-share image {
		width: 750rpx;
		height: 400rpx;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1028;
	}

	.summary {
		width: 100%;
		height: 40rpx;
		background: rgba(243, 73, 48, 0.1);
		display: flex;
		align-items: center;
		margin: 10rpx 0 0 0;
		padding: 0 15rpx;
		border-radius: 8rpx;
	}

	.summary text:nth-child(1),
	.summary text:nth-child(3) {
		color: #f34930;
		font-size: 36rpx;
	}

	.summary text:nth-child(2) {
		flex: 1;
		/* max-width: 590rpx; */
		color: #666666;
		font-size: 24rpx;
		margin: 0 10rpx
	}
</style>

<style>
	page {
		background: #f5f5f5;
	}


	.shop-info-desc {
		font-size: 28rpx;
		line-height: 42rpx;
		letter-spacing: 1rpx;
		color: #333333;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	button {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0);
	}

	.button-hover {
		background: rgba(0, 0, 0, 0) !important;
	}


	canvas {
		position: absolute;
		top: -999999rpx;
		left: 0;
		/* top: -180rpx;
		left: 0; */
	}
</style>
